<template>
  <div>
    <div class="header">
      <div class="pay">
        <div><span style="font-size: 3vh;color: #FED128">{{ month }}</span>·月支出</div>
        <div>{{monthPay}}元</div>
        <div>
          <span style="margin-right: 3vh" v-if="$store.state.income">本月收入 {{$store.state.income}}</span>
          <span style="margin-right: 3vh" v-else>本月收入暂未设置</span>
          <span @click="showBudgetDialog" style="margin-right: 1vh">设置预算</span>
          <span v-if="!outPay && budget.money > 0">本月剩余预算{{ remainMoney }}</span>
          <span v-if="outPay" style="color: red">本月超标啦!!!</span>
        </div>
      </div>
    </div>
    <div class="payList" v-for="(item,index) in payList" :key="index+item">
      <div class="time_pay">
        <span>{{ item.date }}</span>
        <span>¥{{ item.amount }}</span>
      </div>
      <div v-for="(item1,index1) in item.tagName" :key="index1" class="pay_type">
        <span ><span :class="item1.class"></span>{{ item1.type }}</span>
        <span style="color: #ADCC65">{{ item1.money }}</span>
      </div>
    </div>
<!--    预算弹框-->
    <van-dialog v-model="show" title="设置预算" show-cancel-button @cancel="closeBudget" @confirm="confirm" >
      <van-field v-model="budget.money" type="number" label="预算" placeholder="请输入预算"/>
    </van-dialog>
  </div>

</template>

<script>
export default {
  name: "show",
  data(){
    return {
      month: 1, // 月份
      oldBudget: null, // 原来的预算
      monthPay: null, // 月支出
      show: false,
      outPay: false, // 是否支出超标
      // payList: [],
      budget: {  // 预算，本来是打算按照时间存进列表保存的，偷懒没实现
        month: 1,
        money: null
      },
      remainMoney: null //剩余预算
    }
  },
  created() {
    this.$store.commit('initDataSource')
    this.month = new Date().getMonth() + 1;
    this.budget.month = this.month
    this.budget.money = this.$store.state.budget
    // let payList = this.$store.state.payList
  },

  mounted() {
    this.calMonthPay()
  },
  watch: {
    // 监听预算，发生改变时同步判断是否超支
    budget: {
      handler:function (){
        // debugger
        if (this.budget.money === null || this.budget.money === ''){
          this.outPay = false
        } else {
          this.remainMoney = this.budget.money - this.monthPay
          console.log(this.remainMoney)
          if (this.remainMoney < 0) {
            this.outPay = true
          } else {
            this.outPay = false
          }
        }
      },
      // 对象需要深监听
      deep: true
    }
  },
  computed: {
    // 获取支出列表
    payList() {
      return this.$store.state.payList;
    }
  },
  methods: {
    // 展示记录预算弹窗同时记录原有预算
    showBudgetDialog() {
      this.oldBudget = this.budget.money
      this.show = true
    },
    // 取消设置预算时将原值赋值给预算
    closeBudget() {
      // console.log(this.budget.money)
      let budgetMoney = this.oldBudget > 0 ? this.oldBudget : null
      this.budget.money = budgetMoney
    },
    // 计算本月支出
    calMonthPay() {
      let month = this.month < 10 ? '0' + this.month : this.month
      let monthPayList =  this.payList.filter((item) =>{
        return item.date.slice(5,7) == month
      })
      let monthPay = 0
      this.monthPay = monthPayList.forEach((item) =>{
        monthPay += item.amount
      })
      this.monthPay = monthPay
    },
    // 保存预算
    confirm() {
      this.$store.commit('setBudget',this.budget.money)
    }
  }
}
</script>

<style lang="less" scoped>
.header {
  font-size: 1vh;
  color: white;
  width: 100%;
  height: 25vh;
  //background-color: #8BFDFE;
  background: url("../../assets/img/bg2.jpg") no-repeat;
  background-size: 100%;
  display: flex;
  .pay {
    margin: 11vh 0vh 0vh 2vh;
    div:nth-child(2){
      font-size: 5vh;
    }
    .budget:hover {
      color: red;
    }
  }
}
.payList {
  display: flex;
  //padding: 2vh;
  flex-flow: wrap;
  div {
    width: 100%;
  }
  .time_pay {
    padding: 2vh 2vh 0vh 2vh;
    color: darkgray;
    font-size: 2vh;
    display: flex;
    justify-content: space-between;
  }
  .pay_type {
    display: flex;
    font-size: 3vh;
    justify-content: space-between;
    padding-bottom: 1vh;
    border-bottom: #e3e6e8 solid 1px;
    span{
      font-size: 3.5vh;
      padding:1.5vh 2vh 1vh 1vh;
    }
    span:first-child{
      padding-right:1vh;
    }
  }
}
</style>
